<template>
  <div class="container h-p100">
    <transition :name="routerAni">
      <router-view class="router-view of-y-s"></router-view>
    </transition>
    <div class="box box-ver h-p100">
      <div class="of-x-s box bill-list">
        <div class="box">
          <div @click="selectBill(index)" :class="{act: billIndex === index}" v-for="(item, index) in bizAccountBill.marchInfos" :value="item" :key="index" class="bill-item">
            <div class="time box">
              <div class="box-f1 tx-c">{{item.startDate}}</div>
              <div class="box-f1 tx-c">{{item.endDate}}</div>
            </div>
            <div class="area box">
              <div class="from tx-c ell box-f1">{{item.from}}</div>
              <div class="icon-index-arrow icon"></div>
              <div class="to tx-c ell box-f1">{{item.to}}</div>
            </div>
            <div class="user box box-ac ell">
              <!-- <span class="">出差人:&nbsp;</span> -->
              <span v-html="travelPersonShow(item)"></span>
              <!-- <span v-for="(item1, index1) in item.travelPerson.slice(0, 3)" :key="index1" :value="item1">{{item1.userName}}&nbsp;</span> -->
              <span v-if="item.travelPerson.length > 3">&nbsp;.&nbsp;.&nbsp;.</span>
            </div>
            <div v-if="bizAccountBill.marchInfos.length > 1" @click.stop="deleteTravelItem(index)" class="icon icon-delete"></div>
            <!-- <div class="icon icon-bill-checked"></div> -->
          </div>
        </div>
      </div>
      <div class="fee-list box-f1 of-y-s">
        <div :class="{act: feeIndex === index}" v-for="(item, index) in bizAccountBill.marchInfos[billIndex].travelPerson" :value="item" :key="index" class="fee-item">
          <div  @click="changeFeeIndex(index)" class="head box">
            <div class="name">{{item.userName}}</div>
            <div class="tx-r box-f1 total">合计：¥{{getTotal(item.jtTotal, item.zsTotal, item.qtTotal) | formatMoney}}</div>
          </div>
          <div class="content">
            <div @click="editDate(0, billIndex, index)" class="line box-ver box box-jc">
              <div class="box top box-ac">
                <div class="box-f1">往返时间</div>
                <div v-if="item.startDate" class="">{{item.startDate.substring(0, 10).replace(/-/g, '/')}}-{{item.endDate.substring(0, 10).replace(/-/g, '/')}}</div>
              </div>
              <div class="box box-ac tc-666 bot">
                <div class="box-f1">往返时间</div>
                <div class="icon icon-edit"></div>
              </div>
            </div>
            <div @click="editMoney(0, billIndex, index)" class="line box-ver box box-jc">
              <div class="box top box-ac">
                <div class="box-f1">交通费</div>
                <div class="">¥{{item.jtTotal | formatMoney}}</div>
              </div>
              <div class="box box-ac tc-666 bot">
                <div class="box-f1">长途交通 {{item.BUSSESEXPENSE || 0}}元 往返机场 {{item.CFGOBACKFLY || 0}}元 市内交通 {{item.TAXIEXPENSE || 0}}元</div>
                <div class="icon icon-edit"></div>
              </div>
            </div>
            <div @click="editMoney(1, billIndex, index)" class="line box-ver box box-jc">
              <div class="box top box-ac">
                <div class="box-f1">住宿费</div>
                <div class="">¥{{item.zsTotal  | formatMoney}}</div>
              </div>
              <div class="box box-ac tc-666 bot">
                <div class="box-f1">发票 {{item.zsInvoice.num || 0}}张 发票合计 {{item.zsTotal || 0}}元</div>
                <div class="icon icon-edit"></div>
              </div>
            </div>
            <div @click="editMoney(2, billIndex, index)" class="line box-ver box box-jc">
              <div class="box top box-ac">
                <div class="box-f1">其它</div>
                <div class="">¥{{item.qtTotal  | formatMoney}}</div>
              </div>
              <div class="box box-ac tc-666 bot">
                <div class="box-f1">出差补贴 {{item.EVENTIONSUBSIDY || 0}}元 其他费用 {{item.OTHEREXPENSE || 0}}元</div>
                <div class="icon icon-edit"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="next()" class="btn-bot">第三步  确认报销说明和收款信息</div>
    </div>
    <date-picker ref="datePicker"
      :restday="picker.restday"
      :workday="picker.workday"
      :display="picker.show"
      :custom="picker.data"
      :displayRange="[-3, 1]"
      :autoComplete="false"
      @select="select"
      @cancel="cancel"
      ></date-picker>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import datePicker from '@/components/datePicker'
export default {
  name: 'caiBaoStep2',
  components: {
    datePicker
  },
  data () {
    return {
      feeIndex: 0,
      billIndex: 0,
      picker: {
        restday: [],
        workday: [],
        data: [],
        show: false,
        personIndex: 0,
        billIndex: 0
      }
    }
  },
  computed: {
    ...mapState(['userNum', 'bizAccountBill', 'routerAni'])
  },
  created () {
    if (!this.bizAccountBill.marchInfos) {
      return this.$router.replace('/')
    }
    // alert(JSON.stringify(this.bizAccountBill))
    if (this.bizAccountBill.marchInfos[0].travelPerson[0].entryID) return
    this.bizAccountBill.marchInfos.forEach((item, index) => {
      this.getTrapsbybillnum(index)
    })
  },
  methods: {
    travelPersonShow (item) {
      let travelPersonShow = item.travelPerson.map(item => {
        return item.userName
      }).join(`<span class="tc-999">&nbsp;|&nbsp;</span>`)
      return travelPersonShow
      // item.travelPersonShow = travelPersonShow
    },
    selectBill (index) {
      this.billIndex = index
      // console.log(this.billIndex, index, this.billIndex === index)
      this.feeIndex = 0
    },
    deleteTravelItem (index) {
      this.bizAccountBill.marchInfos.splice(index, 1)
      if (index <= this.billIndex) {
        this.billIndex = index > 0 ? index - 1 : 0
      }
    },
    getTrapsbybillnum (index) {
      let billNum = this.bizAccountBill.marchInfos[index].number
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getTrapsbybillnum',
          billNum
        }
      }).then(res => {
        if (res.code === 200) {
          let travelPerson = []
          let { from, to, startDate, endDate } = this.bizAccountBill.marchInfos[index]
          let userIndex = 0
          res.t.forEach((item, index1) => {
            if (from === item.from && to === item.to && startDate === item.startDate.split(' ')[0] && endDate === item.endDate.split(' ')[0]) {
              let item1 = item
              item1.zsInvoice = {
                num: 0,
                money: 0,
                list: []
              }
              if (item1.userNum === this.userNum) {
                item1.qtTotal = item1.eveSubsidy
                item1.EVENTIONSUBSIDY = item1.eveSubsidy
                userIndex = index1
              }
              travelPerson.push(item)
            }
          })
          let travelPersonnum = this.bizAccountBill.marchInfos[index].travelPersonnum
          let newTravelPerson = []
          // 统一出差人的顺序
          if (travelPersonnum.indexOf(this.userNum) > 0) {
            let firstUser = travelPersonnum[0]
            travelPersonnum[userIndex] = firstUser
            travelPersonnum[0] = this.userNum
          }
          travelPersonnum.forEach(item => {
            travelPerson.forEach(item1 => {
              if (item === item1.userNum) {
                newTravelPerson.push(item1)
              }
            })
          })
          this.bizAccountBill.marchInfos[index].travelPerson = newTravelPerson
        }
      })
    },
    changeFeeIndex (index) {
      this.feeIndex = index
    },
    getTotal (jtTotal, zsTotal, qtTotal) {
      let total = +(jtTotal || 0) + +(zsTotal || 0) + +(qtTotal || 0)
      return total
    },
    select ({ start, end, range }) {
      console.log(start, end, range)
      let { billIndex, personIndex } = this.picker
      this.bizAccountBill.marchInfos[billIndex].travelPerson[personIndex].startDate = start.odate
      this.bizAccountBill.marchInfos[billIndex].travelPerson[personIndex].endDate = end.odate
      this.picker.show = false
    },
    cancel () {
      this.picker.show = false
    },
    editDate (index, billIndex, personIndex) {
      let $datePicker = this.$refs.datePicker
      let person = this.bizAccountBill.marchInfos[billIndex].travelPerson[personIndex]
      let firstSelectDay = this.getPickerTar(person.startDate.substring(0, 10))
      let lastSelectDay = this.getPickerTar(person.endDate.substring(0, 10))
      firstSelectDay.begin = true
      lastSelectDay.end = true
      console.log(firstSelectDay, lastSelectDay)
      $datePicker.selectOne(firstSelectDay, true)
      $datePicker.selectOne(lastSelectDay, true)

      this.picker.personIndex = personIndex
      this.picker.billIndex = billIndex
      this.picker.show = true
    },
    getPickerTar (date) {
      let A = date.split('-')
      let year = +A[0]
      let month = +A[1]
      let day = +A[2]
      return {
        date: `${year}-${month}-${day}`,
        day: day,
        month: month,
        odate: date,
        rest: false,
        text: day,
        year: year
      }
    },
    editMoney (index, billIndex, personIndex) {
      let ruterPath = ['/caiBaoStep2/caiBaoFeeJiaoTong', '/caiBaoStep2/caiBaoFeeZuSu', '/caiBaoStep2/caiBaoFeeQiTa'][index]
      this.$router.push({
        path: ruterPath,
        query: {
          type: index, // 0-交通费 1-住宿费 2-其他
          billIndex,
          personIndex
        }
      })
    },
    next () {
      // 检查费用类型
      let expenseId = this.bizAccountBill.marchInfos[0].travelPerson[0].expenseId
      let onlyExpense = true
      this.bizAccountBill.marchInfos.forEach(item => {
        if (item.travelPerson[0].expenseId !== expenseId) {
          onlyExpense = false
        }
      })
      if (!onlyExpense) {
        this.$tools.closeToast()
        return this.$tools.openToast({
          msg: '请选择出差类型相同的行程',
          duration: 3000
        })
      }
      this.$router.push({
        path: '/caiBaoStep3'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.bill-list{
  padding-top:.3rem;
  padding-bottom:.3rem;
}
.bill-item{
  position:relative;
  width:3.1rem;
  height:2rem;
  border-radius:.2rem;
  overflow: hidden;
  background-color:#f8f8f8;
  margin-left:.3rem;
  color:#888;
  border:2px solid rgba(0,0,0,0);
  .time{
    background-color:#c8def8;
    height:.5rem;
    font-size:.22rem;
    color:#333;
    line-height:.5rem;
  }
  .area{
    padding:.25rem .2rem;
    color:#333;
    border-bottom: 1px solid $borderColor;
    .icon-index-arrow{
      width:.37rem;
      height:.21rem;
      margin:0 .1rem;
      @include bg-image('../assets/images/icon-index-arrow');
    }
    .ell{
      text-align: center;
      font-size:.26rem;
    }
  }
  .user{
    padding:.18rem .2rem;
    font-size:.24rem;
  }
  .icon-delete{
    position: absolute;
    width:.5rem;
    height:.5rem;
    bottom:.05rem;
    right:.05rem;
    z-index:1;
    @include bg-image('../assets/images/icon-delete');
  }
  // .icon-bill-checked{
  //   position: absolute;
  //   display:none;
  //   width:.64rem;
  //   height:.64rem;
  //   bottom:-1px;
  //   right:-1px;
  //   z-index:1;
  //   @include bg-image('../assets/images/icon-bill-checked');
  // }
  &.act{
    border:2px solid $themeColor;
    // .icon-bill-checked{
    //   display:block;
    // }
  }
}
.fee-item{
  margin-top:1px;
  .head{
    line-height:.8rem;
    padding:0 .3rem;
    height:.8rem;
    font-size:.36rem;
    color:#333;
    background-color:#cde3fc;
    transition:all .33s;
  }
  .content{
    padding:0 .3rem;
    background-color:#FFF;
    height:0;
    overflow: hidden;
    transition:all .33s;
    .line{
      height:1.5rem;
      border-top:1px solid #ddd;
      &:nth-of-type(1){
        border:none;
      }
      .top{
        padding-bottom:.2rem;
        font-size:.3rem;
      }
      .bot{
        font-size:.26rem;
      }
    }
  }
  &.act{
    .head{
      color:#FFF;
      background-color:$themeColor;
    }
    .content{
      overflow:auto;
      height:6.06rem;
    }
  }
}
.icon-edit{
  width:.36rem;
  height:.36rem;
}
.btn-bot{
  @include btn(100%, 1rem, .36rem);
}
</style>
